<template>
    <div>
        <!-- 顶部 -->
        <div class="top">
            <div class="left">XXX后台管理系统</div>
            <div class="right">
                <div class="username">{{ $store.state.username }}</div>
                <div class="loginout" @click="outLogin">退出登录</div>
            </div>
        </div>
        <!-- 菜单栏 -->
        <div class="container">
            <el-menu class="menu" :default-active="$route.path" router>
                <el-menu-item index="/role">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>角色管理</span>
                </el-menu-item>
                <el-menu-item index="/user">
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>用户列表</span>
                </el-menu-item>
                <el-sub-menu index="/menu">
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>菜单管理</template>
                    <el-menu-item index="/menu">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>菜单管理</span>
                    </el-menu-item>
                    <el-menu-item index="/other"><el-icon>
                            <HelpFilled />
                        </el-icon>其他页面</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <!-- 内容 -->
        <div class="main">
            <router-view />
        </div>
    </div>
</template>
<script>
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            username: localStorage.getItem('username')
        }
    },
    methods: {
        outLogin() {
            // 提示
            ElMessage({
                message: '退出登录成功',
                type: 'success',
            })
            // 清除token
            localStorage.removeItem('token')
            // 清除用户信息username
            localStorage.removeItem('username')
            // 跳转到登录页面
            this.$router.push('/login')
        }
    }
}
</script>
<style scoped lang="scss">
.top {
    width: 100%;
    background: #fff;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;

    .left {
        padding-left: 30px;
        font-size: 22px;
    }

    .right {
        padding-right: 30px;
        display: flex;
        line-height: 30px;

        .username {
            color: #409eff;

        }

        .loginout {
            margin-left: 30px;
            cursor: pointer;
        }
    }
}

.container {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 50px;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    width: 180px;

    .menu {
        height: 100%;
    }
}

.main {
    position: absolute;
    top: 60px;
    left: 180px;
    right: 0;
    padding: 10px 10px;
}
</style>